<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当前售票情况</span>
          </div>
          <div style="ticket-row">
            <el-row>
              <el-col :span="6">
                <div class="number-sell-ticket">
                  <span>售票数:</span>
                  <el-input
                    v-model="number"
                    :disabled="true"
                    class="sell-number"
                  />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="number-sell-ticket">
                  <span>票款:</span>
                  <el-input v-model="money" :disabled="true" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="number-sell-ticket">
                  <span>当前票号:</span>
                  <el-input v-model="qs" :disabled="true" />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="number-sell-ticket">
                  <span>终止票号 :</span>
                  <el-input v-model="zz" :disabled="true" />
                </div>
              </el-col>
            </el-row>
            <el-divider />
            <el-row>
              <el-col :span="6">
                <div class="number-sell-ticket">
                  <span>目的站点 :</span>
                  <el-input v-model="destination" />
                </div>
              </el-col>
              <el-col :span="8" style="text-align: center; line-height: 2">
                <div style="text-algin: center">
                  <el-radio v-model="radio" label="1">当天</el-radio>
                  <el-radio v-model="radio" label="2">明天</el-radio>
                  <el-radio v-model="radio" label="3">后天</el-radio>
                </div>
              </el-col>

              <el-col :span="6" style="text-align: center">
                <el-button type="primary" @click="toSearch">站点查询</el-button>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-row>
    </div>
    <div class="table-container">
      <el-row>
        <el-card class="box-card">
          <ve-table
            v-show="showTable"
            :max-height="200"
            :columns="columnsSelect"
            :table-data="tableDataSelect"
            :event-custom-option="eventCustomOption1"
            row-key-field-name="rowKey"
            :border-y="true"
          />
          <ve-table
            v-show="!showTable"
            :columns="columns"
            :table-data="tableData"
            :cell-selection-option="cellSelectionOption"
            :event-custom-option="eventCustomOption2"
            row-key-field-name="rowKey"
            :border-y="true"
          />
        </el-card>
      </el-row>
    </div>
    <div class="account-container">
      <el-row>
        <el-card class="box-card">
          <el-row>
            <el-col :span="3">
              <div class="number-sell-ticket">
                <span>全票:</span>
                <el-input-number
                  v-model="qp"
                  size="mini"
                  :min="0"
                  :max="10"
                  label="全票"
                  @change="handleChange1"
                />
              </div>
            </el-col>
            <el-col :span="3">
              <div class="number-sell-ticket">
                <span>半票:</span>
                <el-input-number
                  v-model="bp"
                  size="mini"
                  :min="0"
                  :max="10"
                  label="半票"
                  @change="handleChange2"
                />
              </div>
            </el-col>
            <el-col :span="4">
              <div class="number-sell-ticket">
                <span>票款:</span>
                <el-input v-model="pk" size="mini" :disabled="true" />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="number-sell-ticket">
                <span>收款金额 :</span>
                <el-input v-model="skje" size="mini" />
              </div>
            </el-col>
            <el-col :span="4">
              <div class="number-sell-ticket">
                <span>找零 :</span>
                <el-input v-model="zl" size="mini" :disabled="true" />
              </div>
            </el-col>
            <el-col :span="3" style="text-align: center">
              <el-button
                size="mini"
                type="primary"
                @click="checkOut"
              >结算</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="checkOut_1"
              >售票预览</el-button>
               <el-dialog title="打印预览" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.statusNumber" autocomplete="off" />
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消购票</el-button>
                  <el-button type="primary" @click="submitInfo">读取身份信息</el-button>
                </div>
              </el-dialog>
              <el-dialog title="汽车站身份证阅读器" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="form.statusNumber" autocomplete="off" />
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消购票</el-button>
                  <el-button type="primary" @click="submitInfo">读取身份信息</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getsellticket,
  gettwoticketnumber,
  getDestinationInfo,
  getDestinationList,
  updateQsphAdd1,
  insertTicketInfo
} from '@/api/shoupiao'
export default {

  data() {
    return {
      number: '',
      money: '',
      qs: '',
      zz: '',
      qp: 1,
      bp: 0,
      pk: '',
      skje: '',
      zl: '',
      currentPK: '',
      destination: '', // 目的站点
      showTable: true,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      cpbmdcz: '',
      cpbpj: '',
      form: {
        name: '',
        statusNumber: ''
      },
      eventCustomOption1: {
        bodyRowEvents: ({ row, rowIndex }) => {
          return {
            click: (event) => {
              console.log('click::', row.zdmc)
              this.showTable = !this.showTable
              this.getDestination(row.zdmc)
              this.cpbmdcz = row.zdmc
            }
          }
        }
      },
      eventCustomOption2: {
        bodyRowEvents: ({ row, rowIndex }) => {
          return {
            click: (event) => {
              console.log('click::', row.ptpj)
              this.pk = this.qp * row.ptpj
              this.currentPK = row.ptpj
              this.cpbpj = row.ptpj
            }
          }
        }
      },
      cellSelectionOption: {
        // default true
        enable: false
      },
      columnsSelect: [
        { field: 'zdmc', key: 'a', title: '目的站点' },
        { field: 'fcfx', key: 'b', title: '发车方向' }
      ],
      tableDataSelect: [],
      columns: [
        { field: 'zdmc', key: 'a', title: '目的站点' },
        { field: 'zwgs', key: 'b', title: '座位数' },
        { field: 'fcsj', key: 'c', title: '发车时间' },
        { field: 'bclx', key: 'd', title: '班次类型' },
        { field: 'xlmc', key: 'e', title: '线路名称' },
        { field: 'jpk', key: 'f', title: '检票口' },
        { field: 'ptpj', key: 'g', title: '普通票价' }
      ],
      tableData: [
        { zdmc: '', zwgs: '', fcsj: '', bclx: '', xlmc: '', jpk: '', ptpj: '' }
      ],
      radio: ''
    }
  },
  computed: {
    ...mapGetters([
      'yhxm', // store是全局变量，从store中获取用户数据
      'yhbh'
    ]),
    count() {
      return this.qp + this.bp
    }
  },
  watch: {
    qp() {
      // alert('1')
      this.pk = this.qp * this.currentPK + this.bp * 0.5 * this.currentPK
      // this.count = this.qp + this.bp
    },
    bp() {
      this.pk = this.qp * this.currentPK + this.bp * 0.5 * this.currentPK
      // this.count = this.qp + this.bp
    }
  },
  mounted() {
    this.getSellCount()
    this.getTwoNumber()
  },
  methods: {
    async ticketInfoInsert() { // 存入车票信息
      const param = {
        cpbh: this.qs,
        spy: this.yhxm,
        mdcz: this.cpbmdcz,
        pj: this.cpbpj,
        zwh: '1', // 未知

        spjs: '未结',
        tgjs: '未结',
        cljs: '未结',
        ssgs: '三公司',
        jpfs: '流水'
      }
      console.log('存', param, this.cpbpj)
      await insertTicketInfo(param)
    },
    async qsphAdd1() {
      const param = {
        yhbh: this.yhbh
      }
      console.log('加', param)
      await updateQsphAdd1(param)
    },
    async submitInfo() {
      if (this.count === 0) {
        this.dialogFormVisible = false
        location.reload()
      } else {
        this.qp === 0 ? this.bp-- : this.qp--
        // this.dialogFormVisible = false
        // 存
        await this.ticketInfoInsert()
        // alert('1')
        // 加
        await this.qsphAdd1()
        // alert('2')
        // 更新页面
        await this.getTwoNumber()
        console.log('起始票号', this.qs)
        // alert('3')
        this.$message({
          message: '售票成功',
          type: 'success'
        })
        console.log(this.count)
        if (this.count === 0) {
          this.dialogFormVisible = false
        }
      }
    },
    
    async checkOut_1() {
      // this.pk = this.qp * this.currentPK + this.bp * 0.5 * this.currentPK
      this.zl = this.skje - this.pk
      this.dialogFormVisible = true
    },
    
    async checkOut() {
      // this.pk = this.qp * this.currentPK + this.bp * 0.5 * this.currentPK
      this.zl = this.skje - this.pk
      this.dialogFormVisible = true
    },
    handleChange1(value) {
      // 计数器1
      console.log(value)
    },
    handleChange2(value) {
      // 计数器2
      console.log(value)
    },
    async getSellCount() {
      // 获取售票数和钱数
      const param = {
        spy: this.yhxm
      }
      console.log(param)
      const res = await getsellticket(param)
      console.log(res)
      this.number = res.data.count
      this.money = res.data.money
    },
    async getTwoNumber() {
      // 获取起始票号和终止票号
      console.log("用户编号"+this.yhbh)
      const param = {
        yhbh: '1001'
      }
      await gettwoticketnumber(param).then(res => {
        console.log(res.data, '===========')
        this.qs = res.data.qs
        this.zz = res.data.zz
      })
    },
    async toSearch() {
      alert(1)
      this.getDestinationSelect()
      this.showTable = true
    },
    async getDestinationSelect() {
      const param = {
        pybm: this.destination
      }
      const res = await getDestinationList(param)
      console.log(res.data)
      this.tableDataSelect = res.data
      res.data.forEach((item, index) => {
        this.tableDataSelect[index] = item
        this.tableDataSelect[index].rowKey = index
      })
      console.log(this.tableDataSelect)
    },
    async getDestination(zdmc) {
      const param = {
        zdmc: zdmc
      }
      const res = await getDestinationInfo(param)
      console.log(res.data)
      this.tableData = res.data
      res.data.forEach((item, index) => {
        this.tableDataSelect[index] = item
        this.tableDataSelect[index].rowKey = index
      })
      console.log(this.tableData)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input.is-disabled .el-input__inner {
  color: rgb(255, 0, 0);
  font-size: 15px;
}
.ticket-line {
  margin-bottom: 50px;
  display: flex;
  justify-content: space-around;
}
.number-sell-ticket {
  text-align: center;
  display: flex;
  align-items: center;
  span {
    flex: 4;
  }
  div {
    flex: 6;
  }
}
.table-body-cell-class {
  background: #91d5ff !important;
  color: #fff !important;
}
.table-container {
  padding-bottom: 10px;
}
</style>
